<template>
    <div class="userListSearchBox">
        <div class="searchInp">
            <!-- 名称-->
            <el-select v-model="searchName" slot="prepend" placeholder="手机号" class="searchName">
                <el-option v-for="(item, index) in optionArr" :key="index" :label="item.label"
                    :value="item.value"></el-option>
            </el-select>
            <!-- 内容 -->
            <el-input v-model="searchNum" placeholder="请输入内容" class="inp"></el-input>
        </div>
        <!-- 昵称 -->
        <div class="searchInp">
            <label for="theName" class="userListLabel">
                昵称：
            </label>
            <el-input v-model="toName" placeholder="请输入昵称" name="theName" class="inp"></el-input>
        </div>
        <!-- select选项框 -->
        <div class="selectBox" v-for="(item, index) in selectArr" :key="index">
            <!-- select选择框名称 -->
            <label for="select" class="userListLabel">
                {{ item.selectName }}：
            </label>
            <!-- select选择框 -->
            <el-select v-model="selectValue[index]" slot="prepend" placeholder="全部"
                @change="(val) => getSelectResult(item.theName, val)" name="select" class="option">
                <!-- 循环渲染option的每一项 -->
                <el-option v-for="optionArr in item.optionArr" :key="optionArr.id" :label="optionArr.content"
                    :value="optionArr.content"></el-option>
            </el-select>
        </div>
        <!-- 时间框 -->
        <div class="dateBox" v-for="item in dateArr">
            <label for="date" class="noGapLabel">
                {{ item.dateName }}：
            </label>
            <el-date-picker v-model="item.dateModel" type="daterange" align="right" unlink-panels range-separator="~"
                start-placeholder="2015-10-02" :end-placeholder="endDate" :picker-options="pickerOptions"
                value-format="yyyy-MM-dd" @change="(val) => getDateResult(item.theDateName, val)" class="inpDate">
            </el-date-picker>
        </div>
        <!-- 搜索 -->
        <el-button type="primary" @click="searchUser">搜索</el-button>
        <!-- 表格内容新增、删除 -->
        <div class="tableBtn">
            <el-button type="primary" @click="addUserForm = true">新增</el-button>
            <el-button type="info" @click="delUser" :plain="true">删除</el-button>
        </div>
        <!-- 新增信息弹出框 -->
        <el-dialog title="新增信息" :visible.sync="addUserForm" width="35%">
            <el-form :model="formData" :rules="rules" ref="formData" class="addForm">
                <el-form-item label="头像" :label-width="formLabelWidth" prop="img">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" :auto-upload="false"
                        :multiple="false" :on-change="uploadFile" accept="image/jpg,image/jpeg,image/png">
                        <img v-if="formData.img" :src="formData.img" class="el-upload-picture-car"
                            style="width:80px;height: 80px;" />
                        <el-button type="primary" v-show="imgshow">上传头像</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="昵称" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="formData.name" autocomplete="off" class="addInp" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="formData.tel" autocomplete="off" class="addInp" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item label="来聊号" :label-width="formLabelWidth" prop="chatNum">
                    <el-input v-model="formData.chatNum" autocomplete="off" class="addInp"
                        placeholder="请输入来聊号"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="formData.sex" :label="0">男</el-radio>
                    <el-radio v-model="formData.sex" :label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="好友数量" :label-width="formLabelWidth" prop="palNum">
                    <el-input v-model.number="formData.palNum" autocomplete="off" class="addInp"
                        placeholder="请输入好友数量"></el-input>
                </el-form-item>
                <el-form-item label="群组数量" :label-width="formLabelWidth" prop="groupNum">
                    <el-input v-model.number="formData.groupNum" autocomplete="off" class="addInp"
                        placeholder="请输入群组数量"></el-input>
                </el-form-item>
                <el-form-item label="注册时间" :label-width="formLabelWidth" prop="registerDate">
                    <el-date-picker v-model="formData.registerDate" type="datetime" placeholder="选择日期时间" align="right"
                        :picker-options="formDatePickerOptions" value-format="yyyy-MM-dd HH:mm">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="mode">
                    <el-radio v-model="formData.mode" :label="2">正常</el-radio>
                    <el-radio v-model="formData.mode" :label="3">已冻结</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addUser('formData')" :plain="true">确 定</el-button>
                <el-button @click="cancelAdd('formData')">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

export default {
    name: 'userListSearch',
    data() {
        return {
            optionArr: [
                { label: 'ID', value: 'id' },
                { label: '手机号', value: 'tel' },
                { label: '来聊号', value: 'chatNum' }
            ],
            // 循环渲染select输入框
            selectArr: [
                {
                    theName: 'sex', selectName: '性别', optionArr: [
                        { id: 1, content: '全部' },
                        { id: 2, content: '男' },
                        { id: 3, content: '女' }
                    ]
                },
                {
                    theName: 'vip', selectName: '会员', optionArr: [
                        { id: 1, content: '全部' },
                        { id: 2, content: 'VIP1' },
                        { id: 3, content: 'VIP2' },
                        { id: 4, content: 'VIP3' },
                        { id: 5, content: 'VIP4' },
                        { id: 6, content: 'VIP5' },
                    ]
                },
                {
                    theName: 'online', selectName: '在线', optionArr: [
                        { id: 1, content: '全部' },
                        { id: 2, content: '当前在线' },
                        { id: 3, content: '离线' }
                    ]
                },
                {
                    theName: 'mode', selectName: '状态', optionArr: [
                        { id: 1, content: '全部' },
                        { id: 2, content: '正常' },
                        { id: 3, content: '已冻结' }
                    ]
                },
            ],
            dateArr: [
                { dateName: "登录时间", dateModel: 'loginDate', theDateName: 'loginDate' },
                { dateName: "注册时间", dateModel: 'registerDate', theDateName: 'registerDate' }
            ],
            // input输入框
            searchName: '',
            searchNum: '',
            toName: '',
            // select输入框的值
            selectValue: [],
            // 设置默认显示时间
            endDate: '',
            // 时间输入框快捷选项
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                // 设置可选时间范围
                disabledDate: (time) => {
                    return time.getTime() <= new Date('2015-05-01').getTime() || time.getTime() > Date.now() - 8.64e6
                }
            },
            loginDate: [],
            registerDate: [],
            // 获取select选项框的值
            selectResult: {},
            // 获取时间框的值
            dateResult: {},

            // 新增
            formData: {
                img: '',
                name: '',
                tel: '',
                chatNum: '',
                sex: '', // 0：男 1：女
                palNum: '',
                groupNum: '',
                vip: '',
                loginDate: '',
                registerDate: '',
                mode: '', // 2：正常 3：已冻结
                online: '',
                IP: '',
                operate: '',
                personalSign: '',
                wallet: '',
            },
            // 规则
            rules: {
                img: [
                    { required: true, message: '请选择头像', trigger: ['blur','change','click'] },
                ],
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '输入错误', trigger: ['blur','change'] }
                ],
                chatNum: [
                    { required: true, message: '请输入来聊号', trigger: 'blur' },
                    { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: ['blur','change'] }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                ],
                palNum: [
                    { required: true, message: '请输入好友数量', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: ['blur','change'] }
                ],
                groupNum: [
                    { required: true, message: '请输入群组数量', trigger: 'blur' },
                    { type: 'number', message: '请输入数字', trigger: ['blur','change'] }
                ],
                registerDate: [
                    {  required: true, message: '请选择注册日期', trigger: 'change' }
                ],
                mode: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],

            },
            addUserForm: false,
            formLabelWidth: '80px',
            // 头像
            imgshow: true,
            // 新增信息的时间输入框
            formDatePickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            // 删除
            delData: []

        }
    },
    methods: {
        // 获取当前日期
        handleTimeNew() {
            let now = new Date();
            let year = now.getFullYear();
            let month = (now.getMonth() + 1).toString().padStart(2, 0);
            let day = now.getDate().toString().padStart(2, 0);
            return year + '-' + month + '-' + day
        },
        // select值改变，获取内容
        getSelectResult(name, val) {
            this.selectResult[name] = val;
        },
        // 时间框值改变，获取内容
        getDateResult(name, val) {
            if (val != null) {
                this.dateResult[name] = val[0] + '~' + val[1]
            } else {
                this.dateResult[name] = ''
            }

        },
        // 搜索
        searchUser() {
            this.$axios({
                method: 'get',
                url: this.$api.user.userListSearch,
                params: {
                    searchName: this.searchName,
                    searchNum: this.searchNum,
                    name: this.toName,
                    selectResult: this.selectResult,
                    dateResult: this.dateResult
                }
            })
                .then(res => {
                    this.$store.dispatch('userListSearch', res.data);
                    this.searchName = this.optionArr[1].value,
                    this.searchNum = '',
                    this.toName = ''
                    
                })
                .catch(err => {
                    console.log(err);
                })
            this.$emit('clickSearch');
        },
        // 添加
        // 头像
        uploadFile(item) {
            this.formData.img = URL.createObjectURL(item.raw);
            if (this.formData.img != '') {
                this.imgshow = false
            };
        },
        addUser(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addUserForm = false;
                    this.$axios({
                        method: 'post',
                        url: this.$api.user.addUser,
                        data: {
                            addUserData: this.formData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$emit('addUser')
                                for (let key in this.formData) {
                                    this.formData[key] = ''
                                }
                                this.$refs[formName].resetFields();
                                this.imgshow = true
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                } else {
                    return false
                }
            })
        },
        cancelAdd(formName) {
            this.addUserForm = false
            for (let key in this.formData) {
                this.formData[key] = ''
            }
            this.imgshow = true
            this.$refs[formName].resetFields();
        },

        // 批量删除
        delUser() {
            setTimeout((this.$store.state.userList.multipleSelection.forEach(item => {
                this.delData.push(item.id)
            })), 100);
            if (this.delData != '') {
                this.$confirm(' 是否继续?', '批量删除账号', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: this.$api.user.delSelectionUser,
                        params: {
                            selectionUser: this.delData
                        }
                    })
                        .then(res => {
                            if (res.data == 'success') {
                                this.$emit('delSelection')
                                this.$store.state.userList.multipleSelection = []
                                this.delData = []
                            } else {
                                console.log('未选中');
                            }
                            
                        })
                        .catch(err => {
                            console.log(err);
                        })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            } else {
                this.$message({
                    showClose: true,
                    message: '请选择需要删除的信息！',
                    type: 'warning'
                })
            }


        }
    },
    created() {
        this.searchName = this.optionArr[1].value
        this.selectValue = [this.selectArr[0].optionArr[0].content, this.selectArr[1].optionArr[0].content, this.selectArr[2].optionArr[0].content, this.selectArr[3].optionArr[0].content]
        this.endDate = this.handleTimeNew();
    }
}
</script>

<style scoped>
.userListSearchBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tableBtn {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

button {
    height: 40px;
    margin-left: 10px;
    margin-top: 10px;
}

.searchInp {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.inp {
    width: 150px;
}

.searchName {
    width: 90px;
}

/* select选项框 */
.selectBox {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.option {
    width: 80px;
}

/* 时间框 */
.dateBox {
    display: flex;
    align-items: center;
    padding: 10px 0px 0px 20px;
}

.inpDate {
    width: 225px;
}

/* 新增信息弹出框 */
.el-form-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
}

.addInp {
    width: 260px;
}

.addForm>>>.el-form-item {
    margin-left: 0px;
}

.addForm>>>.el-form-item__content {
    margin-left: 10px !important;
}

.styleA .el-upload--picture-card {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.styleB .el-upload--picture-card {
    display: none;
}
</style>